<template>
  <div>
      <div class="top">
        <span @click="fun()" style="font-size:.14rem">💜返回</span>
        <p>圈子详情</p>
        <h1>···</h1>
      </div>
      <Top/>
      <div class="content">
        <div v-for="(v,i) in newarr.quan" :key="i">
          <img :src="v.imgUrl" alt="">
          <div>
            <h1>{{v.title}}</h1>
          <p>{{v.text}}</p>
          </div>
          <button>进入</button>
        </div>
      </div>
  </div>
</template>

<script>
import Top from "@/components/top.vue";
export default {
  methods: {
  fun(){
    this.$router.push("./index")
  }
},
  components:{
    Top ,
  },

mounted() {
    // 1.在页面加载完毕后自动使用生命周期的钩子函数  dispatch
    // 来触发vuex的调用异步操作
    this.$store.dispatch("demoaxiosd");
  },
  // 12.读取state的数据
  computed: {
    newarr(){
      //  console.log(this.$store.state.aboutm.arr.stop)
    return this.$store.state.quanm.arr
   
  }
  },
}
</script>

<style scoped>
.top{
  display: flex;
  height: .4rem;
  width: 100%;
  background-color: white;
  line-height: .4rem;
  position: relative;
  border-bottom: .005rem solid gray;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.top>span{
color: gray;
font-size: .25rem;
margin-right: .25rem;
}
.top>p{
  font-size: .2rem;
}
.top>h1{
  position: absolute;
  right: .3rem;
}

.content>div{
  display: flex;
  position: relative;
  margin: .1rem .1rem;
}
.content>div>img{
  width: .965rem;
  height: .915rem;
}
.content>div>button{
  width: .6rem;
  height: .3rem;
  line-height: .3rem;
  position: absolute;
  right: .2rem;
  top: .4rem;
  border: none;
  background-color: #fff5f4;
  color: #ff595b;
  border-radius: .15rem;
}
.content>div>div{
  width: 1.5rem;
  margin-left: .1rem;
}
.content>div>div>h1{
  font-size: .2rem;
  font-weight: 600;
  margin-top: .15rem;
}
.content>div>div>p{
  font-size: .08rem;
  color: gray;
  margin-top: .1rem;
}
</style>